很少有開發人員將他們的網絡建設工作集中在客戶體驗或整體組織營銷策略上。為了在搜索結果中顯示您的網站，您需要在開發過程中通過一些最佳實踐對網站進行一些更改，以獲得最佳頁面加載時間。

當談到像谷歌這樣的客戶端渲染解決方案時，網站在搜索結果中的排名是根據算法中的指標進行的，其中網站爬蟲會識別出針對特定搜索展示的最佳內容。網頁的 SEO 方面將提升整個網站在搜索引擎中的排名。根據他們的說法，其中一項指標是頁面加載時間。較小的頁面加載時間或站點加載時間表明用戶更傾向于在網站上而不是在加載速度較慢的站點上花費時間。

通常，當用戶打開網站時，瀏覽器向服務器發出請求，服務器通過發送沒有任何內容或加載屏幕的單個 HTML 文件來響應，直到瀏覽器獲取所有元素。這基本上意味著向用戶呈現一個空白頁面，直到內容被提取和編譯，然后才被呈現以供顯示。

客戶端框架或 CSR 的工作方式是，緩慢的初始加載有助于后續頁面快速加載。但是，與服務器的通信僅用于獲取運行時數據。這可能對獲得網站流量非常不利。對于大多數用戶網絡連接來說，這個過程很慢，迫使他們停止與您的網頁互動并轉向另一個網頁。

它最終會使您的網頁在搜索頁面結果中的位置較低。由于網站性能不佳，該應用程序幾乎沒有機會在社交媒體上被推薦。

CSR 的問題和丟失的功能

1. 搜索引擎不支持渲染 JavaScript

Angular 單頁應用程序幾乎會將空的 html 頁面作為源代碼，如下所示。唯一的特殊元素是 app-root 元素，它是 Angular 應用程序的根元素。實際內容通過 java 腳本進入這個根元素。

像 Google 及其 Googlebot 這樣的搜索引擎不支持呈現 JavaScript，并且以 JavaScript 顯示的內容不會被網絡爬蟲注意到，因此該網站不會在搜索結果中可見。

2. 第一個有意義的頁面

從第一頁開始到有意義的可見頁面，任何具有 CSR 的單頁應用程序都可能需要一些時間（至少 2 秒或 3 秒）來加載第一個有意義的頁面。但是如果頁面在 2 或 3 秒內沒有加載，大多數用戶會離開頁面。

3.現場預覽

站點和頁面預覽會吸引用戶打開您的博客或帖子。無論我們是在社交媒體上發布博客還是通過網絡通信平臺分享它們，它們都會獲取內容以生成預覽，以便用戶可以在新聞源中看到它。但是當我們的頁面中沒有內容時，就無法生成提要。這是因為在這樣的應用程序中，源代碼的根元素是空的，沒有內容。

用SSR代替CSR，讓網站對SEO有效

顯然，企業社會責任在許多情況下并不理想，我們可能需要找到另一種解決方案來規避這些問題。然而，它們可以通過服務器端渲染 (SSR) 來克服。

作為解決上述問題的第一步，我們應該首先不要將根元素留空。這樣我們就可以在服務器上動態渲染根元素內容。因此，搜索引擎和站點預覽可以看到有意義的內容。在此之后，角度開始并接管頁面。然后應用程序將啟動并運行并照常工作。

所有這些都可以通過服務器端渲染（SSR）來實現。使用 SSR，當用戶打開應用程序時，瀏覽器會向服務器發出請求，響應將準備好提供 HTML。

服務器端呈現 (SSR) 為應用程序提供了通過在服務器而不是瀏覽器上顯示網頁來在瀏覽器中呈現網頁的能力。服務器端向客戶端發送一個完全呈現的頁面?？蛻舳说?JavaScript 包接管并允許 SPA 框架運行。

SSR 可以通過 Angular Universal 實現 Angular 應用，React 的 Next.js 實現 React 應用。

使用 Angular Universal 啟用服務器端渲染

Angular Universal 技術在服務器上呈現 Angular 應用程序。我們可以通過 @angular/platform-server 包獲得它。

一個普通的 Angular 應用程序在瀏覽器中執行，在 DOM 中呈現頁面以響應用戶操作。Angular Universal 在服務器上執行，生成靜態應用程序頁面，然后在客戶端引導。這意味著應用程序通常會更快地呈現，讓用戶有機會在應用程序完全交互之前查看應用程序布局。（參考：https://angular.io/guide/universal）

在旁注中，可能會注意到服務器端渲染不會提高應用程序的性能，但可以讓搜索引擎和第三方社交媒體服務訪問它。

服務器端渲染骨架

AppModule導入BrowserModule用于在瀏覽器中運行應用程序。AppModule在啟動應用程序的 main.ts 文件中配置。這也稱為 webpack 構建的入口點。它是標準的角度應用程序配置。

對于服務器端渲染，我們在另一個名為AppServerModule的模塊中表示整個應用程序。該模塊從angular.main.server.ts導入本機ServerModule，它將被創建為第二個 webpack 構建（即服務器構建）的入口點。

簡而言之，我們將有兩個構建，一個用于瀏覽器，另一個用于服務器。

設置 Angular 通用

我們首先使用以下命令將 Angular Universal 添加到您的應用程序中：ng add @nguniversal/express-engine/clientProject ssr-playround

上述命令添加/修改以下文件：

• AppServerModule.ts
• 主服務器.ts
• 應用模塊.ts
• angular.json（構建選項）
• 包.json
• tsconfig.server.json

構建應用程序

下一步，我們為應用程序構建客戶端和服務器。客戶端和服務器的構建過程不同，因為這兩個平臺都不同。

構建完成后，我們可以在“dist”文件夾下看到客戶端和服務器的兩個子文件夾。

接下來我們需要一個 Node.js 服務器來執行以下功能：

• 預渲染應用程序并在請求進入時交付生成的 HTML
• 通過 Web 服務器提供應用程序包

設置服務器代碼的步驟

• 設置 Express 服務器
• 從瀏覽器文件夾靜態提供文件。

現在我們來到設置中最有趣的部分，即設置 Express 引擎以呈現 HTML。

• 注冊 ngExpressEngine，這是一個腳本引擎，它告訴 Express 如何呈現特定的 HTML。（注冊名為“html”的“視圖”引擎）。
  
• 告訴 Express 在請求進來以及需要呈現某些內容時使用引擎。這將是路線。（并非每條路由都可以通過靜態服務來處理）。
  

Express 采用 index.html 文件，該文件是空的，并將 angular 帶入該頁面以引導應用程序，就像它在瀏覽器中一樣。一旦 index.html 準備好，它就會自動返回給客戶端。

使用 NgUniversal Express 原理圖時，會自動處理上述基本行為。（typescript 到 JavaScript 的編譯和打包將由已經配置好的 webpack 完成）。

編譯和捆綁服務器進程的命令：npm run compile:server

使用以下命令啟動服務器：node dist/server

現在我們的應用程序已經啟動并運行服務器端渲染，并且可以通過 localhost:4000 打開以通過視圖源查看生成的 HTML。

使用 SSR 生成的 HTML 代碼：

完成這些步驟后，終于可以在搜索引擎上找到我們的網頁詳情了?？傊?，對于任何面向公眾的動態內容渲染應用程序，我們可以選擇服務器端渲染作為解決方案以獲得更好的內容覆蓋。但是，在為您的應用程序選擇解決方案時，將優缺點進行對比總是一個好主意。

優點：

• 初始內容加載 SSR 用于 SEO 和社交媒體共享
• 提高感知性能
• 它適用于靜態網站
• 通過 CLI 的簡單工具

缺點：

• SSR 始終需??要 Node.js 或其包裝器
• 頻繁的服務器請求
• 開始頁面內交互的整體緩慢頁面呈現
• 整頁重新加載

使用 SSR 與 CSR 相比，使用 SSR 的優缺點可以通過將其比喻為超市和餐館來描述。使用客戶端渲染，您可以去超市一次，然后花時間四處走動并挑選食品以備存本月。在最初的消費之后，在家中的每頓飯都可以按需提供食物。

但是對于服務器端渲染，渲染一個頁面元素就像你每次想吃飯時開車去餐廳一樣。每頓飯你都會來回走動，但它會立即讓人飽足，并且不需要大量的初始準備時間來購買食材。實際上，SSR 只是提高了您的網站/應用程序在搜索結果中的性能。這最終會在更大的業務場景中得到回報。